<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的简介</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: relative;
            left: 200px;
            top: -200px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        /*
         定位 更加高级的布局
             通过定位可以把元素放在页面的任意位置
             postion来设置定位
              可选值
                 static 默认值 元素是静止的没有开启定位
                 relative 开启元素的相对定位
                 absolute 开启相对定位
                 fixed 开启元素的固定定位
                 sticky 开启元素的粘滞定位

                 relative 相对定位
                  1、当元素的position属性设置为relative时开启了元素的相对定位
                  2、参考位置:参照元素在文档流中的初始位置
                  3、会提升元素的层级
                  4、相对定位不会使元素脱离文档流
                  5、不会改变元素性质（行内/块）
                  特点：如果不设置偏移量，元素不会发生任何变化

                  偏移量 offset
                   开启定位时，可以通过偏移量来设置元素的位置
                   top
                   bottom
                   left
                   right
                   

         */
    </style>
</head>
<body>
    
</body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</html>